<template>
	<div class="app-container">
		<el-form class="queryForms" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="返修单号" prop="repairNumber">
				<el-input v-model="queryParams.repairNumber" placeholder="请输入返修单号" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="产品名称" prop="productName">
				<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="产品型号" prop="productModel">
				<el-input v-model="queryParams.productModel" placeholder="请输入产品型号" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="物料名称" prop="partName">
				<el-input v-model="queryParams.partName" placeholder="请输入物料(零件)名称" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="生产批次" prop="productionBatch">
				<el-input v-model="queryParams.productionBatch" placeholder="请输入生产批次" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="物料编码" prop="partFigure">
				<el-input v-model="queryParams.partFigure" placeholder="请输入物料(零件)编码" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
			</el-form-item>
			<el-form-item label="外委状态" prop="registrationStatus">
				<el-select v-model="queryParams.registrationStatus" placeholder="请选择">
					<el-option label="待外委" value="0"> </el-option>
					<el-option label="外委中" value="1"> </el-option>
					<el-option label="已下发" value="2"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" size="mini" @click="handleAdd" v-hasPermi="['erp:workflow:outer']">外委</el-button>
			</el-col>
			<right-toolbar @changeTableData="changeTableData" menuNames="propertyRegistrationOuter76" :showSearch.sync="showSearch" @queryTable="getList" :columns.sync="columns" perm="erp:propertyRegistrationOuter:list"></right-toolbar>
		</el-row>

		<div class="informationTab">
			<el-table ref="table" @row-click="row_click" v-loading="loading" :data="propertyRegistrationOuterList" @selection-change="handleSelectionChange" border height="100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="返修任务单" prop="repairNumber" min-width="150" :show-overflow-tooltip="true" v-if="columns[0].visible" />
				<el-table-column label="生产批次" prop="productionBatch" min-width="150" :show-overflow-tooltip="true" v-if="columns[1].visible" />
				<el-table-column label="产品名称" prop="productName" min-width="150" :show-overflow-tooltip="true" v-if="columns[2].visible" />
				<el-table-column label="产品型号" prop="productModel" min-width="150" :show-overflow-tooltip="true" v-if="columns[3].visible" />
				<el-table-column label="产品编号" prop="productNumber" min-width="150" :show-overflow-tooltip="true" v-if="columns[4].visible" />
				<el-table-column label="物料名称" prop="partName" min-width="150" :show-overflow-tooltip="true" v-if="columns[5].visible" />
				<el-table-column label="物料编码" prop="partFigure" min-width="150" :show-overflow-tooltip="true" v-if="columns[6].visible" />
				<el-table-column label="数量" align="center" prop="quantityquantity" min-width="100" :show-overflow-tooltip="true" v-if="columns[7].visible" />
				<el-table-column label="外委状态" align="center" prop="registrationStatus" min-width="150" :show-overflow-tooltip="true" v-if="columns[8].visible">
					<template slot-scope="scope">
						<div v-if="scope.row.registrationStatus == '0'" style="color: #919399">待外委</div>
						<div v-if="scope.row.registrationStatus == '1'" style="color: #639cff">外委中</div>
						<div v-if="scope.row.registrationStatus == '2'" style="color: #d9a533">已下发</div>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<pagination menuNames="Pagination79" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<el-dialog title="外委" :visible.sync="openSourse" width="900px" append-to-body v-dialogDrag>
			<el-form :model="sourceForm" label-width="100px" class="add-form2" ref="form" :rules="rulessource">
				<el-form-item label="编号" prop="serialNumber">
					<el-input v-model="sourceForm.serialNumber" maxlength="20" show-word-limit disabled></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancelSourse">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { outerList, outsource, getNumber } from "@/api/taskFilling/propertyRegistrationOuter"
import { getcolumn } from "@/api/selectList"
export default {
	name: "PropertyRegistrationOuter",
	data() {
		return {
			rows: [],
			openSourse: false,
			rulessource: {
				recordNumber: [{ required: true, message: "记录编号不能为空", trigger: "blur" }],
				serialNumber: [{ required: true, message: "编号不能为空", trigger: "blur" }]
			},
			sourceForm: {},
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 顾客财产登记(外委)设备表格数据
			propertyRegistrationOuterList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				repairProductProcessStepId: null,
				propertyRegistrationRecordId: null,
				outsourcingDate: null,
				deviceTypeId: null,
				deviceTypeName: null,
				partId: null,
				partName: null,
				partFigure: null,
				productionBatch: null,
				productName: null,
				productModel: null,
				registrationStatus: null,
				repairNumber: null
			},
			// 列信息
			columns: [
				{ key: 0, label: `返修任务单`, visible: true },
				{ key: 1, label: `生产批次`, visible: true },
				{ key: 2, label: `产品名称`, visible: true },
				{ key: 3, label: `产品型号`, visible: true },
				{ key: 4, label: `产品编号`, visible: true },
				{ key: 5, label: `物料名称`, visible: true },
				{ key: 6, label: `物料编码`, visible: true },
				{ key: 7, label: `数量`, visible: true },
				{ key: 8, label: `设备状态`, visible: true }
			]
		}
	},
	created() {
		this.getSize()
	},
	activated(){this.getSize()},
	methods: {
		getSize() {
			getcolumn({ pageName: "Pagination79" }).then(response => {
				this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
				this.getList()
			})
		},
		// 单击表格行
		row_click(row, column, event) {
			if (column && column.label == "操作") {
				return
			} else {
				this.$refs.table.toggleRowSelection(row)
			}
		},
		changeTableData() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},

		/** 查询顾客财产登记(外委)设备列表 */
		getList() {
			this.loading = true
			outerList(this.queryParams).then(response => {
				this.propertyRegistrationOuterList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm")
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.rows = selection
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		// 表单重置
		reset() {
			this.sourceForm = {
				id: null,
				recordNumber: null,
				serialNumber: null
			}
			this.resetForm("sourceForm")
		},
		cancelSourse() {
			this.openSourse = false
			this.$refs.table.clearSelection()
		},
		submitForm() {
			if (!this.ids.length) {
				this.$modal.msgError("请先选择外委顾客财产")
				return false
			}
			;(this.sourceForm.idList = this.ids),
				this.$refs["form"].validate(valid => {
					if (valid) {
						outsource(this.sourceForm).then(response => {
							this.$modal.msgSuccess("设置成功")
							this.openSourse = false
							this.$refs.table.clearSelection()
							this.getList()
						})
					}
				})
		},
		handleAdd() {
			let flag
			if (this.rows.length) {
				flag = this.rows.every(item => item.registrationStatus == 0)
			}
			if (flag) {
				this.reset()
				getNumber().then(res => {
					this.sourceForm.serialNumber = res.msg
					this.openSourse = true
				})
			} else {
				this.$modal.msgError("已外委的产品不可在外委")
			}
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				"erp/propertyRegistrationOuter/export",
				{
					...this.queryParams
				},
				`propertyRegistrationOuter_${new Date().getTime()}.xlsx`
			)
		}
	}
}
</script>
